<h2 class="custom">Growl</h2>

<h3 class="custom">Show</h3>

<div class="d-flex">
  <div id="growls-default">
    <div class="growl growl-warning growl-small">
      <div class="growl-close">×</div>
      <div class="growl-title">Warning!</div>
      <div class="growl-message">The kitten is awake!</div>
    </div>
    <div class="growl growl-warning growl-medium">
      <div class="growl-close">×</div>
      <div class="growl-title">Warning!</div>
      <div class="growl-message">The kitten is awake!</div>
    </div>
    <div class="growl growl-warning growl-large">
      <div class="growl-close">×</div>
      <div class="growl-title">Warning!</div>
      <div class="growl-message">The kitten is awake!</div>
    </div>
  </div>

  <div id="growls-default">
    <div class="growl growl-warning growl-small">
      <div class="growl-close">×</div>
      <div class="growl-title"></div>
      <div class="growl-message">The kitten is awake!</div>
    </div>
    <div class="growl growl-warning growl-medium">
      <div class="growl-close">×</div>
      <div class="growl-title"></div>
      <div class="growl-message">The kitten is awake!</div>
    </div>
    <div class="growl growl-warning growl-large">
      <div class="growl-close">×</div>
      <div class="growl-title"></div>
      <div class="growl-message">The kitten is awake!</div>
    </div>
  </div>
</div>

<h3 class="custom">Trigger show</h3>

<button id="show_growl" class="btn btn-default">Show growls</button>

<button id="show_growl_message" class="btn btn-default">
  Show growls with message only
</button>
